<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户注册</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
  <link rel="stylesheet" href="../static/css/login.css" th:href="@{/css/login.css}">
</head>
<body class="qt-bj buryit">

<br>
<br>
<br>

 <div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;margin: auto !important;">
   <div class="ur container">
     <div class="ui middle aligned grid">
       <div class="column">

         <div class="container" id="app">
           <div class="loginBox">

             <form class="ui form" id="loginForm" method="post" action="#" th:action="@{/yhAdmin/zhuChe}">
               <h2 class="m-juZ">用户注册</h2>
               <div class="input-wrapper">
                 <label>用户名:</label>
                 <input name="nickname"  type="text"  placeholder="请输入用户名">
               </div>
               <div class="input-wrapper">
                 <label>账号:</label>
                 <input name="username"  type="text"  placeholder="请输入账号">
               </div>
               <div class="input-wrapper">
                 <label>密码:</label>
                 <input name="password"  type="password"  placeholder="密码">
               </div>
               <div class="input-wrapper">
                 <label>邮箱:</label>
                 <input name="email"  type="email" placeholder="请输入邮箱">
               </div>

               <a href="../login/login.html" th:href="@{/yhAdmin}">已有账号？去登录</a>
               <button type="ui fluid large teal submit button" >注册</button>


               <!-- 非空验证（当没有输入用户和密码就显示提示） -->
               <div class="ui error mini message"></div>
               <!-- 用户名和密码错误显示的页面 -->
               <!-- th:unless判断相当于if -->
               <!-- negative变成红色错误背景 -->
               <div class="ui mini negative message" th:text="${message}" th:if="${not #strings.isEmpty(message)}">用户名和密码错误</div>

             </form>

           </div>
         </div>



       </div>


     </div>
   </div>
 </div>




<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
<script>

  //非空验证
  $('.ui.form').form({
    fields: {
      username: {
        identifier: 'username',//input的name值是什么，如果没有输入就会弹出下面的提示信息
        rules: [{
          type: 'empty',
          prompt: '请输入用户名'
        }]
      },
      password: {
        identifier: 'password',//input的name值是什么，如果没有输入就会弹出下面的提示信息
        rules: [{
          type: 'empty',
          prompt: '请输入密码'
        }]
      },
      email: {
        identifier: 'email',//input的name值是什么，如果没有输入就会弹出下面的提示信息
        rules: [{
          type: 'empty',
          prompt: '请输入邮箱'
        }]
      }
    }
  });
</script>



</body>
</html>